<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Image Card Zoom In And Out Transition</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>
<body>
<div class="gallery">
<article class="card">
<figure>
<img src="https://img.freepik.com/free-photo/tropical-rainforest-adventure-green-mystery-nature-generated-by-ai_188544-38653.jpg"
alt="Rain Forest">
<figcaption>
<h3>Rain Forest</h3>
</figcaption>
</figure>
</article>
<article class="card">
<figure>
<img src="https://img.freepik.com/free-photo/lavender-field-sunset-near-valensole_268835-3910.jpg"
alt="Lavender Field">
<figcaption>
<h3>Lavender Field</h3>
</figcaption>
</figure>
</article>
<article class="card">
<figure>
<img src="https://img.freepik.com/free-photo/wooden-bridge-leading-adventurous-walk-middle-woods_181624-6278.jpg"
alt="Wooden Bridge">
<figcaption>
<h3>Wooden Bridge</h3>
</figcaption>
</figure>
</article>
</div>
</body>
</html>